<template>
  <div class="login-container">
    <el-card class="login-card" shadow="hover">
      <template #header>
        <h3>登录</h3>
      </template>
      <el-form ref="ruleFormRef" class="login-form" autocomplete="on"
               :model="loginData"
               :rules="loginFormRules"
               label-position="top" status-icon>
        <el-form-item label="用户名" prop="userName">
          <el-input placeholder="请输入用户名" v-model="loginData.userName" name="userName" type="text"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input placeholder="请输入密码" v-model="loginData.password" name="password" show-password
                    type="password"/>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-row justify="space-between" style="width: 100%">
            <el-col :span="12">
              <el-input placeholder="验证码" v-model="loginData.code" name="code" type="text"/>
            </el-col>
            <el-col :span="12" class="code-box">
              <el-image class="code"
                        :src="codeImage"
                        v-loading="codeLoading"
                        @click="loadCaptcha()"
              ></el-image>
            </el-col>
          </el-row>
        </el-form-item>
        <el-row justify="center">
          <el-button type="primary" @click="Login(ruleFormRef)">提交</el-button>
        </el-row>
      </el-form>
    </el-card>
  </div>

</template>

<script setup>
import {getCaptcha, login} from '../../api/user';
import {onMounted, onUpdated, ref, reactive} from "vue";
import {ElMessage} from "element-plus"
import {useRouter} from "vue-router";
import {setToken} from "../../utils/auth";
import {loginFormRules} from "../../rules/UserFormRules";

const router = useRouter();
let codeImage = ref();
const ruleFormRef = ref(null);
const codeLoading = ref(true);
let loginData = reactive({
  userName: "",
  password: "",
  code: "",
  key: ""
});

function loadCaptcha() {
  getCaptcha().then(response => {
    codeImage.value = response.url.img;
    loginData.key = response.url.key
    codeLoading.value = false;
  })
}

async function Login(formEl) {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      login(loginData).then(response => {
        if (response.code === 200) {
          ElMessage({
            message: '登录成功，3秒后跳转到主页',
            type: 'success',
            duration: 3 * 1000
          })
          setToken(response.token)
          const t = setInterval(() => {
            router.push('/dashboard');
            clearInterval(t)
          }, 3 * 1000);
        } else {
          ElMessage({
            message: response.msg,
            type: 'warning',
            duration: 3 * 1000
          })
        }
      });
    } else {
      ElMessage({
        message: '请完成所有必填字段',
        type: 'warning',
        duration: 5 * 1000
      })
    }
  })
}

onMounted(() => {
  loadCaptcha();
})

onUpdated(() => {
  loadCaptcha();
})


</script>

<style scoped>
.login-container {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form, .login-card {
  min-width: 30%;
}

.code-box {
  text-align: right;
  height: 32px;
}

.code {
  height: 32px;
}


.login-card {
  padding: 1rem;
}
</style>